<template>
  <div class="top">
    <van-nav-bar
      :title="topTitle"
      :left-text="leftText"
      right-text="按钮"
      :left-arrow="haveLeft"
      :fixed=true
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  </div>
</template>

<script>
    import { NavBar } from "vant"
    export default {
        name: "Top",
        components:{
            [NavBar.name]:NavBar
        },
        methods: {
            onClickLeft() {
                //至于往哪里返回需要在进行编码
                this.$router.go(-1)
            },
            onClickRight() {

            },
            //检查路由去赋默认值
            checkRouterAndSetDefaultTopTitle()
            {
                this.setTopData(false,'首页','')
                switch (this.$router.currentRoute.name) {
                    case 'buycar':
                        this.setTopData(false,'购物车','')
                        break;

                    case 'vip':
                        this.setTopData(false,'VIP','')
                        break;

                    case 'search':
                        this.setTopData(false,'搜索','')
                        break;

                    case 'news':
                        this.setTopData(true,'新闻资讯','返回')
                        break;
                    case 'news.desc':
                        this.setTopData(true,'新闻详情','返回')
                    break;
                    case 'enjoy':
                        this.setTopData(true,'会员趣事','返回')
                    break;

                    case 'enjoy.desc':
                        this.setTopData(true,'趣事详情','返回')
                    break;

                    case 'goods':
                        this.setTopData(true,'商品列表','返回')
                    break;

                    case 'goods.desc':
                        this.setTopData(true,'商品详情','返回')
                    break;
                }
            },
            //设置topTitle默认值
            setTopData(haveLeft,topTitle,leftText) {
                this.haveLeft = haveLeft
                this.topTitle = topTitle
                this.leftText = leftText
            }
        },
        data(){
          return {
            haveLeft:false,
            topTitle:'首页',
            leftText:'',
            historyFrom:'home'
          }
        },
        mounted() {
          //监测路由变化
          this.$router.afterEach((to, from) => {
              switch (to.name) {
                  case 'home':
                      this.setTopData(false,'首页','')
                  break;

                  case 'buycar':
                      this.setTopData(false,'购物车','')
                  break;

                  case 'vip':
                      this.setTopData(false,'VIP','')
                  break;

                  case 'search':
                      this.setTopData(false,'搜索','')
                  break;

                  case 'news':
                      this.setTopData(true,'新闻资讯','返回')
                  break;

                  case 'news.desc':
                      this.setTopData(true,'新闻详情','返回')
                  break;

                  case 'enjoy':
                      this.setTopData(true,'会员趣事','返回')
                  break;
                  case 'enjoy.desc':
                      this.setTopData(true,'趣事详情','返回')
                  break;

                  case 'goods':
                      this.setTopData(true,'商品列表','返回')
                  break;
                  case 'goods.desc':
                      this.setTopData(true,'商品详情','返回')
                  break;
              }
          })
          //初始化路由和标题信息（防止刷新）
          this.checkRouterAndSetDefaultTopTitle()
        }


    }
</script>

<style scoped>

</style>
